<script setup>
import HelloWorld from './components/HelloWorld.vue'
import { computed, watch } from 'vue'
import { useI18n } from 'vue-i18n'
import { useConfigStore } from '@/store/modules/config'
import zhCn from 'element-plus/es/locale/lang/zh-cn'
import en from 'element-plus/es/locale/lang/en'

const { locale } = useI18n()
const configStore = useConfigStore()

// 设置Element Plus的语言
const elementLocale = computed(() => {
  return locale.value === 'zh-CN' ? zhCn : en
})

// 监听主题变化
watch(() => configStore.isDark, (newVal) => {
  document.documentElement.classList.toggle('dark', newVal)
}, { immediate: true })

// 监听语言变化
watch(() => configStore.locale, (newVal) => {
  locale.value = newVal
}, { immediate: true })
</script>

<template>
  <el-config-provider :locale="elementLocale">
    <router-view />
  </el-config-provider>
</template>

<style scoped>
.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
  transition: filter 300ms;
}
.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.vue:hover {
  filter: drop-shadow(0 0 2em #42b883aa);
}
</style>
